<template>
  <div class="content-photo">
    <ul class="photo-list">
      <li class="photo" v-for="singer in singerList" :key="singer.singer_id">
        <div class="img-show">
          <router-link to="/singerdetail">
            <img :src="singer.singer_pic" class="img-size" />
          </router-link>
          <router-link to="/singerdetail">
            <h3 class="singer-title">{{ singer.singer_name }}</h3>
          </router-link>
        </div>
      </li>
      <!-- <li class="photo">
        <div class="img-show">
          <router-link to="/singerdetail">
            <img
              src="https://y.qq.com/music/photo_new/T001R500x500M000003Nz2So3XXYek.jpg?max_age=2592000"
              alt="陈奕迅"
              class="img-size"
            />
          </router-link>
          <router-link to="/singerdetail">
            <h3 class="singer-title">陈奕迅</h3>
          </router-link>
        </div>
      </li>
      <li class="photo">
        <div class="img-show">
          <router-link to="/singerdetail">
            <img
              src="https://y.qq.com/music/photo_new/T001R500x500M000001BLpXF2DyJe2.jpg?max_age=2592000"
              alt="林俊杰"
              class="img-size"
            />
          </router-link>
          <router-link to="/singerdetail">
            <h3 class="singer-title">林俊杰</h3>
          </router-link>
        </div>
      </li>
      <li class="photo">
        <div class="img-show">
          <router-link to="/singerdetail">
            <img
              src="https://y.qq.com/music/photo_new/T001R500x500M000002J4UUk29y8BY.jpg?max_age=2592000"
              alt="薛之谦"
              class="img-size"
            />
          </router-link>
          <router-link to="/singerdetail">
            <h3 class="singer-title">薛之谦</h3>
          </router-link>
        </div>
      </li>
      <li class="photo">
        <div class="img-show">
          <router-link to="/singerdetail">
            <img
              src="https://y.qq.com/music/photo_new/T001R500x500M000001fNHEf1SFEFN.jpg?max_age=2592000"
              alt="邓紫棋"
              class="img-size"
            />
          </router-link>
          <router-link to="/singerdetail">
            <h3 class="singer-title">邓紫棋</h3>
          </router-link>
        </div>
      </li>
      <li class="photo">
        <div class="img-show">
          <router-link to="/singerdetail">
            <img
              src="https://y.qq.com/music/photo_new/T001R500x500M000002pfVN53lKI7x.jpg?max_age=2592000"
              alt="告五人"
              class="img-size"
            />
          </router-link>
          <router-link to="/singerdetail">
            <h3 class="singer-title">告五人</h3>
          </router-link>
        </div>
      </li>
      <li class="photo">
        <div class="img-show">
          <router-link to="/singerdetail">
            <img
              src="	https://y.qq.com/music/photo_new/T001R500x500M000000CK5xN3yZDJt.jpg?max_age=2592000"
              alt="许嵩"
              class="img-size"
            />
          </router-link>
          <router-link to="/singerdetail">
            <h3 class="singer-title">许嵩</h3>
          </router-link>
        </div>
      </li>
      <li class="photo">
        <div class="img-show">
          <router-link to="/singerdetail">
            <img
              src="https://y.qq.com/music/photo_new/T001R500x500M000002bX9V73wkzzM.jpg?max_age=2592000"
              alt="Zyboy忠宇"
              class="img-size"
            />
          </router-link>
          <router-link to="/singerdetail">
            <h3 class="singer-title">Zyboy忠宇</h3>
          </router-link>
        </div>
      </li>
      <li class="photo">
        <div class="img-show">
          <router-link to="/singerdetail">
            <img
              src="https://y.qq.com/music/photo_new/T001R500x500M000002YetSZ06c9c9.jpg?max_age=2592000"
              alt="王靖雯"
              class="img-size"
            />
          </router-link>
          <router-link to="/singerdetail">
            <h3 class="singer-title">王靖雯</h3>
          </router-link>
        </div>
      </li>
      <li class="photo">
        <div class="img-show">
          <router-link to="/singerdetail">
            <img
              src="https://y.qq.com/music/photo_new/T001R500x500M000000IBYF50SRnXP.jpg?max_age=2592000"
              alt="王源"
              class="img-size"
            />
          </router-link>
          <router-link to="/singerdetail">
            <h3 class="singer-title">王源</h3>
          </router-link>
        </div>
      </li> -->
    </ul>
  </div>
</template>

<script lang="ts">
export default {
  name: 'SingerPhoto',
}
</script>

<script lang="ts" setup>
import type { SingerList } from '@/api/singer/model/singerModel'
const props = defineProps<{
  singerList: SingerList
}>()
</script>

<style scoped>
.content-photo {
  width: 1220px;
  margin: 0 auto;
  margin-bottom: 5px;
}
.photo-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.photo {
  display: inline-block;
  width: 244px;
  margin-bottom: 20px;
}
.img-show {
  width: 224px;
  padding: 25px 0;
  margin: 0 20px 0 0;
  text-align: center;
  background-color: #fbfbfd;
}
.img-size {
  width: 140px;
  height: 140px;
  border-radius: 50%;
}
.singer-title {
  font-size: 16px;
  color: #000;
  font-weight: 400;
  margin: 20px 30px 4px;
}

.img-show a:hover {
  text-decoration: none;
}
.img-show h3:hover {
  color: green;
}
</style>
